<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Napi</title>
</head>
<style type="text/css">
        body {
			background-color: #000000;
			margin:0 auto;
			font-family: Consolas, sans-serif;
		}
        a  {
			text-decoration: none;
		}

		button.button {
			background-color: #ffffff;
            font-family: Consolas, sans-serif;
            font-size: 16px;
            border-radius: 3px;
            border-color: #C4C4C4;
            align-self: center;
            border: 1px solid #C4C4C4;
            outline: none;
			width: 100px; 
			height:24px
		}

		button.button:hover {
			background: #4B97D9;
			color: #fff;
			border: 0px;
			font-family: Consolas, sans-serif;
            font-size: 16px;
			width: 100px; 
			height: 24px
		}

		input.text:focus {
			outline: 2px solid #4B97D9;
  			border: 0px;
        }

		input.text {
			outline: 2px solid #C4C4C4;
			border: 0px;
		}
    .tabs{
        position: relative;
        height: 800px;
        min-height: 800px;
        max-height: 800px;
        clear: both;
        margin: 25px 0;
        overflow: hidden;
    }
    .tab{
        float: left;
        margin: 25px 0;
    }
    .tab label{
        background: #eee;
        padding: 10px 20px;
        position: relative;
        left: 1px;
        border: 0px solid;
        margin-left: -1px;
        z-index: 2;
        color: #333333;
        background: white;
    }
    input.text {
		width: 250px;
        height: 18px; 
        vertical-align:middle;
		}
    .content{
        position: absolute;
        top: 61px;
        left: 0;
        right: 0;
        bottom: 0;
        background: black;
        padding: 20px 20px;
        border: 0px solid #ccc;
        max-height: 800px;
        overflow: scroll;
    }
    [type=radio]:checked ~ label{
        color: white;
        background: #3288e9;
        border: 0px solid #ccc;
        z-index: 3;
    }
    [type=radio]:checked ~ label ~ .content{
        z-index: 1;
    }
</style>
<script type="text/javascript">
    var mode = 0;
    let vscode = acquireVsCodeApi();

    function sendParamMsg() {
		var fileNames = document.getElementById("hFilePath").value;
		var genDir = document.getElementById("genHResultDir").value;
        var serviceId = document.getElementById("serviceID").value;
		var result = {
			msg: "param",
			fileNames: fileNames,
			genDir: genDir,
            serviceId: serviceId,
		}
		vscode.postMessage(result);
	}
    function selectHFilePath() {
        var result = {
            msg: "selectHFilePath",
            mode: mode
        }
        vscode.postMessage(result);
    }

    function selectPath(message) {
        var result = {
            msg: message,
        }
        vscode.postMessage(result);
    }

    function cancel() {
        var result = {
            msg: "cancel"
        }
        vscode.postMessage(result);
    }

    window.addEventListener('message', event => {
        const message = event.data.msg;
        const path = event.data.path;
        if(message == "selectHFilePath") {
            document.getElementById("hFilePath").value = path;
            fillInputDir(path);
        } else if(message == "selectHResultDir") {
            document.getElementById("genHResultDir").value = path;
        }
        else {
            console.log("param is error");
        }
    })

    function inputChange() {
        var fileNames = document.getElementById("hFilePath").value; //interfaceFile
        fillInputDir(fileNames);
    }

    function fillInputDir(fileNames) {
        var dir;
        var fileName;
        if (mode == 0) {
            if (fileNames.indexOf(",") != -1) {
                fileName = fileNames.substring(0, fileNames.indexOf(","));
            } else {
                fileName = fileNames;
            }
            dir = fileName.substring(0, fileName.lastIndexOf("\\"));
        } 
        else {
            dir = fileNames;
        }
        document.getElementById("genHResultDir").value = dir;
    }

</script>

<body>
    <div class="tabs">
        <div class="tab">
            <input type="radio" style="display: none;" id="tab2" name="group-1">
            <label for="tab2">Gen-Service</label>
            <div class="content">
                <div id="interface" style="margin-top: 10px;">
                    .h文件选择*:&ensp;
                    <input class="text" type="text" id="hFilePath" onchange="inputChange()" onporpertychange="inputChange() ">
                    <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;"
                        onclick="selectHFilePath()">
                </div>
            
                <div style="margin-top: 10px;">
                    输出路径选择:
                    <input class="text" accept="text" id="genHResultDir" style="margin-left: 3px;">
                    <img src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;"
                        onclick="selectPath('selectHResultDir')">
            
                </div>
            
                <div style="margin-top: 10px;">
                    serviceID:&emsp;&ensp;
                    <input class="text" type="text" id="serviceID" value="9000" style="margin-left: 2px;">
                </div>
            
                <div style="margin-top: 20px; text-align: left;">
                    <button type="button" class="button" onclick="cancel()"
                        style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button>
                    <button type="button" class="button" onclick="sendParamMsg()"
                        style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button>
                    <a href="https://gitee.com/openharmony/napi_generator" target="_blank">
                        <button type="button"
                            style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>